<template>
  <div style="margin-top: 60px">
    <!--  轮播图-->
    <div style="margin-bottom: 50px">
      <el-carousel :interval="4000" type="card" height="450px">
        <el-carousel-item v-for="item in lunImg" :key="item.imgScr">
          <img class="medium" alt="" :src="item.imgScr" style="height: 400px;margin-left: 140px">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--  文章列表-->
    <div class="News-box">
      <ul v-for="showItem in showNewsList" :key="showItem.article_id">
        <li style="border-bottom: 1px solid rgb(0,0,0,0.3);display: flex;justify-content: space-between;align-items: center;padding-bottom: 10px;cursor: pointer" @click="lookMore(showItem.article_id)">
          <div style="width: 750px">
            <h5 style="font-size: 20px">{{showItem.article_title}}</h5>
            <div
                style="border: 1px solid rgb(0,0,0,0.5);display: inline-block;padding: 2px;border-radius: 3px;font-size: 10px;background-color: #f4f4f5;margin: 10px 0">
              {{showItem.article_sort===1?'情感':showItem.article_sort===2?'热血':showItem.article_sort===3?'技术':'政治'}}
            </div>
            <div>{{showItem.article_content}}</div>
            <div style="display: flex;align-items: center;font-size: 12px;margin-top: 10px">
              <img :src="showItem.user_icon?showItem.user_icon:test" alt="" style="width: 40px;height: 40px;border-radius: 50%">
              <span style="margin-right: 10px;margin-left: 10px">{{showItem.user_name}}</span>
              <span>发布于 {{$moment(showItem.putout_time).fromNow()}}</span>
            </div>
          </div>
          <div>
            <img :src="showItem.article_img" alt="" style="height: 150px;width: 250px;border-radius: 5%">
          </div>
        </li>
      </ul>
      <!--    分页器-->
      <el-pagination
          :page-size="5"
          
          layout="prev, pager, next"
          :total="Number(sumpage)"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
      <!--  右边展示-->
    </div>

    <RightShow></RightShow>
  </div>
</template>

<script>
import RightShow from "@/components/RightShow"

export default {
  name: "HomeContent",
  components: {
    RightShow
  },
  data() {
    return {
      lunImg: [
        {imgScr: require('../../public/img/shuffl_1.jpg')},
        {imgScr: require('../../public/img/shuffl_2.jpg')},
        {imgScr: require('../../public/img/shuffl_3.jpg')},
        {imgScr: require('../../public/img/shuffl_4.jpg')},
      ],
      testImg: [
        {imgScr: require('../../public/img/New1.jpg')},
        {imgScr: require('../../public/img/new2.jpg')},
        {imgScr: require('../../public/img/new3.jpg')},
        {imgScr: require('../../public/img/new4.jpg')}
      ],
      test: require('../../public/img/Myphoto.jpg'),
      showNewsList:'',
      sumpage:''
    }
  },
  methods:{
    handleCurrentChange(val){
      console.log("当前页"+val)
      this.$api.articleApi.showHome({page:val}).then(value => {
        this.showNewsList=value.data
        this.sumpage=value.sumpage
      })
    },
    lookMore(article_id){
      this.$router.push({name: 'newContent', query: {id: article_id}})
      this.$nextTick(()=>{
        console.log("dom更新")
      })
    }
  },
  
  created() {
    this.$api.articleApi.showHome().then(value => {
      this.showNewsList=value.data
      this.sumpage=value.sumpage
    })
  }
}
</script>

<style scoped>

.News-box {
  width: 1200px;
  /*border: 1px solid red;*/
  display: inline-block;
  margin-left: 120px;
}

.new-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: 62px;
}

.new-title {
  padding-bottom: 10px;
}

.more {
  padding-top: 10px;
}


</style>